<template>
  <div class="base-dialog-address-container">
    <van-dialog v-model="newShowDialog" show-cancel-button
      :beforeClose="chargeBtn">
      <div class="base-dialog-address-div">
        <van-field v-model="newAddressInfo.provinceName"
          label="省"
          placeholder="请选择"
          :readonly="true"
          @click.native="selectAddress(1)"
        >
          <template #extra>
              <img src="@assetsImgs/down.png" />
          </template>
        </van-field>
        <van-field v-model="newAddressInfo.cityName"
          label="市"
          placeholder="请选择"
          :readonly="true"
          @click.native="selectAddress(2)"
        >
          <template #extra>
              <img src="@assetsImgs/down.png" />
          </template>
        </van-field>
        <van-field v-model="newAddressInfo.districtName"
          label="县/区"
          placeholder="请选择"
          :readonly="true"
          @click.native="selectAddress(3)"
        >
          <template #extra>
              <img src="@assetsImgs/down.png" />
          </template>
        </van-field>
        <van-field v-model="newAddressInfo.countrySideName"
          label="乡镇"
          placeholder="请选择"
          :readonly="true"
          @click.native="selectAddress(4)"
        >
          <template #extra>
              <img src="@assetsImgs/down.png" />
          </template>
        </van-field>
        <van-field v-model="newAddressInfo.villageName"
          label="村"
          placeholder="请选择"
          :readonly="true"
          @click.native="selectAddress(5)"
        >
          <template #extra>
              <img src="@assetsImgs/down.png" />
          </template>
        </van-field>
      </div>
    </van-dialog>
    <!-- 选择框组件 -->
    <base-picker :showPicker.sync="showPicker" :dataSource="pickerArray"
      :selectedText="pickerValue" @input="popConfirm"></base-picker>
  </div>
</template>
<script>
import { Dialog, Toast, Field } from 'vant';
import { mapActions } from 'vuex';
import BasePicker from './BasePicker.vue';

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    addressInfo: {
      type: Object,
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field,
    [Toast.name]: Toast,
    BasePicker,
  },
  data() {
    return {
      newShowDialog: false,
      newAddressInfo: this.addressInfo,
      provinceList: [],
      cityList: [],
      districtList: [],
      countrySideList: [],
      villageList: [],

      showPicker: false,
      pickerArray: [],
      pickerValue: '',
      currentFlag: '',
    };
  },
  watch: {
    showDialog(value) {
      this.newShowDialog = value;
    },
  },
  created() {
    if (this.newAddressInfo.provinceCode) {
      this.changeList('', 0, false);
    } else {
      this.getAreaInfo({ parentCode: '', level: 0 })
        .then((result) => {
          if (result) {
            this.provinceList = result.map(data => ({
              value: data.code,
              text: data.name,
            }));
          }
        }).catch(err => {
          utils.logError(err);
        });
    }
  },
  methods: {
    ...mapActions('claim', ['getAreaInfo']),
    changeList(code, level, flag) {
      this.getAreaInfo({ parentCode: code, level })
        .then((result) => {
          if (level === 0) {
            this.provinceList = result.map(data => ({
              value: data.code,
              text: data.name,
            }));
          } else if (level === 1) {
            this.cityList = result.map(data => ({
              value: data.code,
              text: data.name,
            }));
          } else if (level === 2) {
            this.districtList = result.map(data => ({
              value: data.code,
              text: data.name,
            }));
          } else if (level === 3) {
            this.countrySideList = result.map(data => ({
              value: data.code,
              text: data.name,
            }));
          } else if (level === 4) {
            this.villageList = result.map(data => ({
              value: data.code,
              text: data.name,
            }));
          }
          this.clearInfo(flag, level);
        })
        .catch(err => {
          utils.logError(err);
        });
    },
    clearInfo(flag, level) {
      // 值变化导致下级码表变化，展示信息变化
      if (flag) {
        if (level === 1) {
          this.newAddressInfo.cityName = '';
          this.newAddressInfo.cityCode = '';
          this.districtList = []; // level=1
        } else if (level === 2) {
          this.newAddressInfo.districtName = '';
          this.newAddressInfo.districtCode = '';
          this.countrySideList = [];
        } else if (level === 3) {
          this.newAddressInfo.countrySideName = '';
          this.newAddressInfo.countrySideCode = '';
          this.villageList = [];
        } else if (level === 4) {
          this.newAddressInfo.villageName = '';
          this.newAddressInfo.villageCode = '';
        } else {
          return;
        }
        this.clearInfo(flag, level + 1);
      }
      if (!flag) {
        // 初始化信息-循环调用查询下级地址
        if (level === 0) {
          this.changeList(this.newAddressInfo.provinceCode, 1);
        } else if (level === 1) {
          this.changeList(this.newAddressInfo.cityCode, 2);
        } else if (level === 2) {
          this.changeList(this.newAddressInfo.districtCode, 3);
        } else if (level === 3) {
          this.changeList(this.newAddressInfo.countrySideCode, 4);
        }
      }
    },
    selectAddress(flag) {
      this.currentFlag = flag;
      if (flag === 1) {
        this.pickerArray = this.provinceList;
        this.pickerValue = this.newAddressInfo.provinceName;
      } else if (flag === 2) {
        this.pickerArray = this.cityList;
        this.pickerValue = this.newAddressInfo.cityName;
      } else if (flag === 3) {
        this.pickerArray = this.districtList;
        this.pickerValue = this.newAddressInfo.districtName;
      } else if (flag === 4) {
        this.pickerArray = this.countrySideList;
        this.pickerValue = this.newAddressInfo.countrySideName;
      } else if (flag === 5) {
        this.pickerArray = this.villageList;
        this.pickerValue = this.newAddressInfo.villageName;
      }
      this.showPicker = true;
    },
    popConfirm(text, value) {
      if (this.currentFlag === 1 && value !== this.newAddressInfo.provinceCode) {
        this.newAddressInfo.provinceCode = value;
        this.newAddressInfo.provinceName = text;
        this.changeList(value, 1, true);
      } else if (this.currentFlag === 2 && value !== this.newAddressInfo.cityCode) {
        this.newAddressInfo.cityCode = value;
        this.newAddressInfo.cityName = text;
        this.changeList(value, 2, true);
      } else if (this.currentFlag === 3 && value !== this.newAddressInfo.districtCode) {
        this.newAddressInfo.districtCode = value;
        this.newAddressInfo.districtName = text;
        this.changeList(value, 3, true);
      } else if (this.currentFlag === 4 && value !== this.newAddressInfo.countrySideCode) {
        this.newAddressInfo.countrySideCode = value;
        this.newAddressInfo.countrySideName = text;
        this.changeList(value, 4, true);
      } else if (this.currentFlag === 5 && value !== this.newAddressInfo.villageCode) {
        this.newAddressInfo.villageCode = value;
        this.newAddressInfo.villageName = text;
      }
    },
    cancel() {
      this.$emit('update:showDialog', false);
    },
    confirm() {
      this.$emit('update:showDialog', false);
      this.$emit('confirm', this.newAddressInfo);
    },
    chargeBtn(action, done) { // 确认or取消
      if (action === 'cancel') { // 取消按钮
        this.$emit('update:showDialog', false);
        done();
        return;
      }
      if ((!this.newAddressInfo.provinceName)
        || (!this.newAddressInfo.cityName)
        || (!this.newAddressInfo.districtName)
        || (!this.newAddressInfo.countrySideName)
        || (!this.newAddressInfo.villageName)) {
        Toast('请完善地址信息');
        done(false);
        return;
      }
      if (action === 'confirm') { // 确定按钮
        this.$emit('update:showDialog', false);
        this.$emit('confirm', this.newAddressInfo);
        done();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.base-dialog-address-container{
  .base-dialog-address-div{
    padding: 25px 10px;
    img{
      width: 15px;
      height: 10px;
      margin-top: 5px;
    }
  }
}
// /deep/.van-toast{
//   width: 100px;
// }
</style>
